<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">

<title>配置博客信息</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script src="jquery/jquery-3.1.1.js"></script>
<link rel="stylesheet" href="css/StyleSheet.css" type="text/css" />
<style type="text/css">
.blogSetting_table {
	height: 100%;
	padding-bottom: 10px;
	background-color: white;
	width: 100%;
	text-align: center;
	color: #5C9D1D;
}

.mytd {
	text-align: left;
}

.blogSetting_table input {
	box-shadow: 2px 2px 1px #A1F47F inset;
	background-color: #CBEACB;
}

.blogSetting_table textarea {
	box-shadow: 2px 2px 1px #A1F47F inset;
	overflow: scroll;
	background-color: #CBEACB;
	width: 380px;
}

.blogSetting_table input[type=file] {
	background-color: #D4D0C7;
}

img {
	width: 80px;
	height: 80px;
}
</style>

</head>
<body style="background-color: white;">
	<form id="uploadForm" action="file" enctype="multipart/form-data"
		method="post" target="aa">
		<div>
			<table cellpadding="0" cellspacing="0"
				class="regTable regWidth blogSetting_table" height="100%"
				align="center">
				<tr>
					<td class="mytd1" style="width:100px"><label for="blogName">博客名称</label>
					</td>
					<td class="mytd"><input type="text" name="blogName"
						class="input1" id="blogName" />
					</td>
				</tr>
				<tr>
					<td class="mytd1" style="width:100px"><label for="description">博客描述</label>
					</td>
					<td class="mytd"><textarea name="description" class="input1"
							id="description" rows="5" cols="44"></textarea>
					</td>
				</tr>
				<tr>
					<td class="mytd1">博客头像</td>
					<td class="mytd"><input type="file" id="chooseImg"
						name="myfile" accept="image/*" autocomplete="off" /> <br />
						<img src="#"/>
						<br />
						<iframe name="aa" src="" style="display:none"></iframe></td>
				</tr>
				<tr>
					<td colspan="2" align="center"><input type="submit" value="保存"
						style="margin: 15px auto;" class="opt_sub save" onclick="save()"/>
					<tr>
			</table>
		</div>
	</form>
	<script type="text/javascript">
		window.onload = function() {
			InitBlogsInfo();
		};
		/* 初始化博客信息  */
		function InitBlogsInfo() {
			$.ajax({
				type : "POST",
				url : "blogIndex!BlogsInfo",
				success : function(msg) {
					var json = eval("(" + msg + ")");
					$("#blogName").val(json[0].title);
					$("#description").val(json[0].description);
					$('#chooseImg').next().next().attr('src',
							json[0].headerimage);
				},
				error : function(r, r2, err) {
					alert("连接错误:" + err.message);
				}
			});
		}
		/* 修改博客信息 */
		function save() {
			if (IsNull($("#blogName").val())) {
				alert("请填写博客名称!");
				return;
			}
			if($("#blogName").val().length>=50){
				alert("博客描述长度小于50!");
				return;
			}
			var headerimage = "Images/Headers/" + $("#chooseImg").val();
			$.ajax({
				type : "POST",
				url : "blogSetting",
				data : {
					"b.title" : $("#blogName").val(),
					"b.description" : $("#description").val(),
					"b.headerimage" : headerimage
				},
				success : function(msg) {
					if(msg == "ok")
					{
						alert("保存成功!");
						parent.topIframe.location.reload();
						parent.leftIframe.location.reload();
					}
					else{
						alert("保存失败!");
					}

				},
				error : function(r, r2, err) {
					alert("连接错误:" + err.message);
				}
			});
		}
		$('#chooseImg').on('change', function() {
			var file = $(this)[0].files[0];
			if (file.type.startsWith('image')) {
				$(this).next().next().attr('src', URL.createObjectURL(file));
			}
		});
		function IsNull(str) {
			if (str.length == 0) {
				return true;
			} else
				return false;
		}
	</script>
</body>
</html>
